<template>
  <div class="Users">

    <el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loading">
      <el-tab-pane label="用户管理" name="first">
        <el-table :data="userList" style="width: 100%">
          <el-table-column label="unid" prop="unid"> </el-table-column>
          <el-table-column label="用户" prop="username"> </el-table-column>
          <el-table-column label="昵称" prop="nickname"> </el-table-column>
          <el-table-column label="vip等级" prop="vipLevel"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size=""
                @click="handleEdit(scope.$index, scope.row)"
                
                >编辑</el-button
              >
              <el-button
                size=""
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table></el-tab-pane
      >
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import * as api from "@/api/users"
export default {
  meta: {
    title: "yhgl",
    name:"用户管理",
    icon:"iconfont icon-yonghu"
  },
  data() {
    return {
      userList: [],
      activeName: "first",
      loading:false
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

  },
  created(){
    this.loading= true
    api.getUserList().then(res=>{
      console.log(res);
      this.userList=res.data.data
      this.loading=false
    })
  }
};
</script>
<style lang="less" scoped>
/deep/ .el-table {
  text-align: center;
  .el-table__header {
    tr {
      .el-table__cell {
        height: 60px;
        text-align: center;
        font-size: 14px;
      }
    }
  }
  .cell {
    text-align: center;
  }
}
</style>